﻿.temporaryFieldArea {
	position : fixed;
	top : 0;
	bottom : 0;
	left : 0;
	z-index : 10;
	width : 100%;
	height : 100%;
	background-color : #efeff4;
	-webkit-animation : temporaryInputIn ease-out 200ms 1;
	animation : temporaryInputIn ease-out 200ms 1;
	box-shadow : 0 0 10px #333;
}
.temporaryFieldArea[data-out] {
	-webkit-animation-name : temporaryInputOut;
	animation-name : temporaryInputOut;
}
.temporaryFieldArea > header {
	background-color : #333;
	height : 38px;
	padding : 2px;
	line-height : 34px;
	font-size : 14px;
	text-align : center;
}
.temporaryFieldArea > header > button {
	padding : 0 10px;
}
.temporaryFieldArea > header > button:disabled {
	opacity : 0;
}
.temporaryFieldArea > header > button:first-child {
	float : left;
}
.temporaryFieldArea > header > button:last-child {
	float : right;
	color : #00d700;
}
.temporaryFieldArea > blockquote {
	position : relative;
	margin : 12px 0;
}
.temporaryFieldArea > blockquote > * {
	line-height : 28px;
	height : 28px;
	width : 100%;
	padding : 0 6px;
	border : 0 none;
	font-size : 14px;
	background-color : #fefefe;
	display : block;
	margin-bottom : 6px;
}

.temporaryTextarea > blockquote[data-surplus]::after {
	content : attr(data-surplus);
	position : absolute;
	bottom : 2px;
	right : 6px;
	padding : 2px;
	color : #999;
}
.temporaryTextarea > blockquote[data-surplus="-1"]::after {
	display : none;
}
.temporaryTextarea textarea {
	height : auto;
	border-radius : 0;
}
.temporaryTextarea textarea:disabled,
.temporaryTextarea input:disabled {
	color : inherit;
}


.temporaryCheckbox > blockquote > button {
	text-align : left;
	padding-left : 28px;
	position : relative;
}
.temporaryCheckbox > blockquote > button::before {
	content : "";
	width : 16px;
	height : 16px;
	background-clip : content-box;
	position : absolute;
	left : 6px;
	top : 6px;
	border : 1px solid #c8c8c8;
	padding : 3px;
	box-shadow : inset 0 0 10px #c8c8c8;
}
.temporaryCheckbox > blockquote > button:disabled::before {
	opacity : 0.3;
}
.temporaryCheckbox > blockquote > button[data-check]::before {
	background-color : #d70000;
}


.temporaryRadio > blockquote > button::before {
	border-radius : 100%;
}


.fieldset dl {
	margin : 5px 0;
	position : relative;
}
.fieldset button {
	background-color : rgba(255, 250, 210, 0.6);
	border-radius : 3px;
	box-shadow : 0 0 3px rgba(0, 0, 0, 0.3);
	padding : 2px 6px;
}
.fieldset button:disabled {
	background-color : rgba(20 , 20, 20, 0.1) !important;
	box-shadow : none;
}
.fieldset button[data-submit]
{
	width : 100%;
	height : 36px;
	line-height : 32px;
	background-color : rgba(60, 255, 145, 0.5) !important;
	transition : opacity 500ms;
	-webkit-transition : opacity 500ms;
}
.fieldset button[data-submit]:disabled {
	opacity : 0.6;
}
.fieldset input[type="text"],
.fieldset input[type="password"],
.fieldset textarea {
	border : 0 none;
	background : transparent url(image/pencil.png) right 10px no-repeat;
	background-size : 8px 8px;
	width : 100%;
	height : 28px;
	line-height : 28px;
	overflow : hidden;
	text-overflow : ellipsis;
	padding-right : 10px;
}
.fieldset textarea {
	min-height : 28px;
	height : auto;
}
.fieldset input[readonly],
.fieldset textarea[readonly] {
	background-image : url(image/arrow.png);
	background-size : 3px 6px;
}
.fieldset *[data-list] {
	display : none;
}

@-webkit-keyframes temporaryInputIn {
	0% {
		-webkit-transform : translateX(100%);
	}
	100% {
		-webkit-transform : translateX(0);
	}
}
@keyframes temporaryInputIn {
	0% {
		transform : translateX(100%);
	}
	100% {
		transform : translateX(0);
	}
}
@-webkit-keyframes temporaryInputOut {
	0% {
		-webkit-transform : translateX(0);
	}
	100% {
		-webkit-transform : translateX(100%);
	}
}
@keyframes temporaryInputOut {
	0% {
		transform : translateX(0);
	}
	100% {
		transform : translateX(100%);
	}
}